<template>
	<view class="cu-dialog bg-white flex flex-column flex-1 align-center" :style="'margin:'+warpperWidth+'px;'+'width:'+screenWidth+'px'">
		<view class="icon-item position-absolute right-2">
			<uni-icons type="close" size="25" @click="closeModalDialog()" />
		</view>
		<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/small39000.jpg" class="smaller-circle"></image>
		<view class="flex flex-column flex-1 align-center">
			<view class="flex align-center">
				<text class="font-md text-black">张娟</text>
			</view>
			<text class="font-sm text-danger mt-1">江苏·苏州</text>
			<view class="flex flex-wrap">
				<view class="border rounded32 text-lightbule font-sm mx-1 my-1 px-2" v-for="(item2,index2) in setlist" :key="index2">{{item2.name}}</view>
			</view>
			<view class="flex align-center my-1">
				<text class="font text-warning font-weight-bold mr-2 mt-1">4.95</text>
				<!-- 禁用状态 -->
				<!-- <uni-rate :size="16" :disabled="true" disabledColor="#ffc107" :value="4.5" /> -->
				<sunui-star :defaultStar="4.5" :disabledStar="true" class="sunui-star" />
			</view>
			<view class="flex align-center justify-center font-weight-bold w-100 my-2">
				<view class="mx-4" @click="changeTab(index)" v-for="(item,index) in tabBars" :key="index" :class="tabIndex === index ? 'text-main text-underline font-md' : 'text-light-muted'">
					{{item.name}}
				</view>
			</view>
			<text class="font font-weight-bold text-main mt-1">￥3/分钟</text>
			<button type="primary" class="callpair-button" @click="enterChatRoom()">语音通话</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				screenWidth: 1080,
				warpperWidth: 80,
				CustomBar: this.CustomBar,
				modalName: null,
				radio: 'radio1',
				tabIndex: 0,
				setlist: [{
					name: "情感纠纷"
				}, {
					name: "经济合同"
				}, {
					name: "情感纠纷"
				}],
				tabBars: [{
					name: "语音通话"
				}, {
					name: "视频通话"
				}],
			};
		},
		created() {
			uni.getSystemInfo({
				success: res => {
					this.screenWidth = res.windowWidth * 0.8;
					this.warpperWidth = res.windowWidth * 0.1;
				},
			});
			// 初始化towerSwiper 传已有的数组名即可
		},
		methods: {
			closeModalDialog() {
				uni.navigateBack({

				})
			},
			// 切换选项卡
			changeTab(index) {
				this.tabIndex = index
			},
			enterChatRoom() {
				uni.navigateTo({
					url: "../chat/chat"
				})
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			RadioChange(e) {
				this.radio = e.detail.value
			},
			ChooseCheckbox(e) {
				let items = this.checkbox;
				let values = e.currentTarget.dataset.value;
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					if (items[i].value == values) {
						items[i].checked = !items[i].checked;
						break
					}
				}
			}
		}
	}
</script>

<style>
	.smaller-circle {
		margin: 32upx 32upx 0;
		border-radius: 80upx;
		width: 160upx;
		height: 160upx;
	}

	.callpair-button {
		padding: 16rpx 64rpx;
		margin: 36rpx;
		background-color: #A868FF !important;
		font-size: 24rpx;
		line-height: 1.8;
		border-radius: 48rpx;
	}
</style>
